<template>
  <div class='prize-list'>
    <p class="line-bar"></p>
    <div class="swiper-container content pr">
      <div class="swiper-wrapper">
        <div class="swiper-slide swiper-no-swiping" v-for="(item,index) in getListData">
          <p><span>{{item.phone | hidePhone}}</span><span>获得{{item.prize}}</span><span class="fr">{{item.time}}前</span></p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props:["listData"],
  components:{
  },
  name: "",
  data () {
    return {

    };
  },
  computed:{
    getListData(){
      return this.listData||[]
    }
  },
   methods:{
  },
  filters:{
    hidePhone(val){
      return val.slice(0,3)+"****"+val.slice(7)
    }
  },
   created(){
    
  },
  mounted(){
     var mySwiper = new Swiper('.swiper-container', {
        direction : 'vertical',
        setWrapperSize :true,
        loop: true,
        loopedSlides:20,
        slidesPerView :"auto",
        speed:10000,
        autoplay: {
          delay: 100,
          disableOnInteraction: false,
          waitForTransition: false,
        },
        noSwiping : true,
      })
  }
}
</script>
<style lang="scss" scoped>
.prize-list{

  .line-bar{
    height: 13px;
    background-color: #CF4D0F;
    border-radius: 13px;
    opacity: .39;
  }
  .content{
    top: -6px;
    margin: 0 5px;
    height: 100%;
    background-color: #FFF0C2;
  }
  .swiper-wrapper{
    height: 45px;
    background: rgba(236, 151, 28, 0.12);
  }

  .swiper-slide{
    height: 45px!important;

    p{
      line-height: 45px;
      padding: 0 10px;

      span{
        font-size: 14px;
        color: #EC971C;
      }
    }
  }
  .swiper-slide:nth-child(2n){
    background: rgba(236, 151, 28, 0.24);;
  }
  
}
</style>